<template>
	<div :style="{
		width: '100%',
		padding: '0px 7%',
		margin: '20px auto 40px',
		position: 'relative',
		background: 'rgb(255, 255, 255)',
	}">
		<div :style="{
			width: '100%',
			lineHeight: '56px',
			textAlign: 'center',
			background:
				'url(http://codegen.caihongy.cn/20230921/eb4b56c7d55142c4b9339e032022bfb5.png) repeat-x center bottom',
			height: '66px',
		}">
			<div :style="{
				padding: '0 20px',
				color: '#333',
				textAlign: 'center',
				background: 'none',
				display: 'inline-block',
				width: 'auto',
				fontSize: '20px',
			}">
				论坛
			</div>
		</div>
		<div :style="{
			padding: '20px 0',
			margin: '0px auto',
			borderColor: '#ddd',
			borderRadius: '0px',
			background: 'none',
			borderWidth: '0 0 1px',
			width: '100%',
			borderStyle: 'solid',
		}">
			<el-button size="mini" @click="backClick">返回</el-button>
		</div>
		<div class="section-content" :style="{
			border: '1px solid #f6f6f6',
			width: '100%',
			padding: '20px 0',
			margin: '20px auto',
			position: 'relative',
			background: '#fcfcfc',
		}">
			<div class="content-title" :style="{
				padding: '0 10px',
				margin: '0 0 10px',
				color: '#333',
				textAlign: 'center',
				width: '100%',
				lineHeight: '32px',
				fontSize: '18px',
				height: '32px',
			}">
				{{ detail.title }}
			</div>
			<div :style="{
				width: '100%',
				alignItems: 'center',
				justifyContent: 'center',
				display: 'flex',
			}">
				<div :style="{
					margin: '0 10px 0 0',
					fontSize: '14px',
					color: '#999',
					textAlign: 'right',
				}">
					发布人：{{ detail.username }}
				</div>
				<div :style="{ color: '#999', textAlign: 'left', fontSize: '14px' }">
					发布时间：{{ detail.addtime }}
				</div>
			</div>


			<div class="operate" :style="{
				padding: '0px',
				alignItems: 'center',
				textAlign: 'right',
				background: 'none',
				display: 'flex',
				width: '100%',
				justifyContent: 'flex-end',
			}">
				<div @click="isFollowClick" :style="{
					border: '1px solid #1abc9e20',
					cursor: 'pointer',
					padding: '0 15px',
					margin: '0 20px',
					alignItems: 'center',
					borderRadius: '0px',
					background: '#1abc9e10',
					display: 'flex',
					justifyContent: 'center',
				}">
					<template v-if="isFollow">
						<i class="el-icon-star-on"></i>
					</template>
					<template v-else>
						<i class="el-icon-star-off"></i>
					</template>
					<span :style="{ color: '#333', lineHeight: '30px', fontSize: '14px' }">{{ isFollow ? "取消关注" : "点击关注"
						}}</span>
				</div>
				<div @click="zanClick" :style="{
					border: '1px solid #1abc9e20',
					cursor: 'pointer',
					padding: '0 15px',
					margin: '0 20px',
					alignItems: 'center',
					borderRadius: '0px',
					background: '#1abc9e10',
					display: 'flex',
					justifyContent: 'center',
				}">
					<span class="icon iconfont icon-zan10" :style="{
						margin: '0 2px 0 0',
						lineHeight: '30px',
						fontSize: '14px',
						color: '#333',
					}"></span>
					<span :style="{ color: '#333', lineHeight: '30px', fontSize: '14px' }">{{ zanType ? "取消赞" : "点赞"
						}}({{ allZan }})</span>
				</div>
			</div>
			<div v-if="detail.type == 2" style="margin: 0 80px;">
				<el-radio-group v-model="radio">
					<div class="radioItem" v-for="(item, index) in detail.list" :key="index">
						<el-radio :label="item.id">{{ item.vote }}（{{ item.amount }}票）</el-radio>
					</div>
				</el-radio-group>
				<div>
					<el-button :style="{
					border: '1px solid #1abc9e20',
					cursor: 'pointer',
					padding: '0 20px',
					margin: '0 10px',
					outline: 'none',
					color: '#333',
					borderRadius: '0px',
					background: '#1abc9e10',
					width: 'auto',
					lineHeight: '30px',
					fontSize: '14px',
					height: '30px',
				}" @click="votingMth">投票</el-button>
				</div>
			</div>
			<div :style="{ border: '0px solid #ddd', padding: '20px' }" class="content-detail" v-html="detail.content">
			</div>
			<div style="text-align: right;margin-bottom: 30px;margin-right: 30px;">
				<el-button :style="{
					border: '1px solid #1abc9e20',
					cursor: 'pointer',
					padding: '0 20px',
					margin: '0 10px',
					outline: 'none',
					color: '#333',
					borderRadius: '0px',
					background: '#1abc9e10',
					width: 'auto',
					lineHeight: '30px',
					fontSize: '14px',
					height: '30px',
				}" @click="addComment">新增评价</el-button>
			</div>
			<div class="comments-container">
				<comment-item v-for="comment in commentList" :key="comment.id" :comment="comment" :id="id" :depth="0"
					@addReply="getCommentMth" />
			</div>
		</div>
		<el-dialog title="添加评论" :visible.sync="dialogFormVisible">
			<el-form :model="form" ref="form">
				<el-form-item label="评论" label-width="60px" prop="content">
					<editor :style="{
						minHeight: '200px',
						border: '0',
						outline: 'none',
						color: '#333',
						borderRadius: '4px',
						width: '100%',
						lineHeight: '32px',
						fontSize: '14px',
					}" v-model="form.content" class="editor" action="file/upload">
					</editor>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addForum('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import commentItem from "./comment";
export default {
	components: { commentItem },
	//数据集合
	data() {
		return {
			radio: '',
			comments: [
				// 示例评论数据，每个评论都有自己的回复列表
				{
					id: 1,
					author: "User 1",
					text: "Great post!",
					replies: [{ id: 2, author: "User 2", text: "Thanks!" }],
				},
				// ...更多评论
			],
			baseUrl: "",
			id: "",
			detail: {},
			commentList: [],
			dialogFormVisible: false,
			form: {
				content: "",
				parentid: "",
				type: 1,
			},
			userid: localStorage.getItem("frontUserid"),
			editorOption: {
				modules: {
					toolbar: [
						["bold", "italic", "underline", "strike"],
						["blockquote", "code-block"],
						[{ header: 1 }, { header: 2 }],
						[{ list: "ordered" }, { list: "bullet" }],
						[{ script: "sub" }, { script: "super" }],
						[{ indent: "-1" }, { indent: "+1" }],
						[{ direction: "rtl" }],
						[{ size: ["small", false, "large", "huge"] }],
						[{ header: [1, 2, 3, 4, 5, 6, false] }],
						[{ color: [] }, { background: [] }],
						[{ font: [] }],
						[{ align: [] }],
						["clean"],
						["image", "video"],
					],
				},
			},
			rules: {
				content: [{ required: true, message: "请输入评论", trigger: "blur" }],
			},
			zanType: false,
			zanForm: {},
			showIndex: -1,
			showIndex1: -1,
			allZan: 0,
			isFollow: null
		};
	},
	created() {
		this.baseUrl = this.$config.baseUrl;
		this.id = this.$route.query.id;
		this.getDetail();

	},
	//方法集合
	methods: {
		votingMth() {
			const seachObj = this.detail.list.find(res => res.id == this.radio)
			let data = {
				forumId: seachObj.forumId,
				id: seachObj.id,
			}
			this.$http.put('forum/vote', data).then((res) => {
					if (res.data.code == 0) {
						this.$message.success('投票成功')
						this.getDetail();
					}
			});
			
		},
		isFollowClick() {
			let data = {
				followUserId: this.detail.userid
			}
			if (this.isFollow) {
				this.$http.put('follow/cancel', data).then((res) => {
					if (res.data.code == 0) {
						this.isFollow = false;
					}
				});
			} else {
				this.$http.post('follow/save', data).then((res) => {
					if (res.data.code == 0) {
						this.isFollow = true;
					}
				});
			}
		},
		followCheck() {
			this.$http.get("follow/check", { params: { id: this.detail.userid } }).then((res) => {
				if (res.data.code == 0) {
					this.isFollow = res.data.data.follow;
					this.isFollowId = res.data.data.id;
				}
			});
		},

		// 新增评论
		addComment() {
			this.form.parentid = 0;
			this.form.refid = this.id;
			this.dialogFormVisible = true;
		},
		addForum(formName) {
			let sensitiveWords = "";
			let sensitiveWordsArr = [];
			if (sensitiveWords) {
				sensitiveWordsArr = sensitiveWords.split(",");
			}
			for (var i = 0; i < sensitiveWordsArr.length; i++) {
				//全局替换
				var reg = new RegExp(sensitiveWordsArr[i], "g");
				//判断内容中是否包括敏感词
				if (this.form.content.indexOf(sensitiveWordsArr[i]) > -1) {
					// 将敏感词替换为 **
					this.form.content = this.form.content.replace(reg, "**");
				}
			}
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.form.avatarurl = localStorage.getItem("frontHeadportrait")
						? localStorage.getItem("frontHeadportrait")
						: "";
					this.$http.post("comment/save", this.form).then((res) => {
						if (res.data.code == 0) {
							this.$message({
								type: "success",
								message: "评论成功!",
								duration: 1500,
								onClose: () => {
									this.form.content = "";
									this.dialogFormVisible = false;
									this.getComment();
								},
							});
						}
					});
				} else {
					return false;
				}
			});
		},
		// 返回按钮
		backClick() {
			history.back();
		},
		onEditorReady(editor) {
			editor.root.setAttribute("data-placeholder", "请输入内容...");
		},
		getDetail() {
			this.$http.get(`forum/detail/${this.id}`).then((res) => {
				if (res.data.code == 0) {
					res.data.data.content = res.data.data.content.replace(
						/img src/gi,
						'img style="width:100%;" src'
					);
					this.detail = res.data.data;
					this.followCheck();
					this.getComment();
					this.getZan();
					this.getAllZan();
				}
			});
		},
		getCommentMth() {
			this.getComment();
		},
		getComment() {
			this.$http.get(`comment/user/${this.id}?type=1`).then((res) => {
				if (res.data.code == 0) {
					this.commentList = res.data.data;
				}
			});
		},
		getZan() {
			this.$http
				.get("storeup/list", {
					params: {
						page: 1,
						limit: 1,
						type: 21,
						userid: localStorage.getItem("frontUserid"),
						tablename: "forum",
						refid: this.id,
					},
				})
				.then((res) => {
					if (res.data && res.data.code == 0) {
						if (res.data.data.list.length) {
							this.zanType = true;
							this.zanForm = res.data.data.list[0];
						} else {
							this.zanType = false;
						}
					}
				});
		},
		getAllZan() {
			this.$http
				.get("storeup/list", {
					params: {
						page: 1,
						type: 21,
						tablename: "forum",
						refid: this.id,
					},
				})
				.then((res) => {
					if (res.data && res.data.code == 0) {
						this.allZan = Number(res.data.data.total);
					}
				});
		},
		zanClick() {
			if (this.zanType) {
				this.$http.post("storeup/delete", [this.zanForm.id]).then((res) => {
					if (res.data && res.data.code == 0) {
						this.$message.success("取消成功");
						this.getZan();
						this.getAllZan();
					}
				});
			} else {
				let data = {
					name: this.detail.title,
					picture: "1",
					refid: this.detail.id,
					type: 21,
					tablename: "forum",
					userid: localStorage.getItem("frontUserid"),
				};
				this.$http.post("storeup/add", data).then((res) => {
					if (res.data && res.data.code == 0) {
						this.$message.success("点赞成功");
						this.getZan();
						this.getAllZan();
					}
				});
			}
		},
	},
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.radioItem {
	margin: 20px;
}
.section {
	width: 900px;
	margin: 0 auto;
}

.section-content {
	margin-top: 30px;
}

.sectionBtn {
	display: flex;
}

.content-title {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
}

.content-sub-title {
	text-align: center;
	margin-top: 20px;
	color: #888888;
	font-size: 14px;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both;
}

.header-block {
	height: 50px;
	line-height: 50px;
	display: flex;
}

.userinfo {
	align-self: center;
	margin-left: 15px;
}

.content-block-ask {
	margin: 15px 0 20px 65px;
}

.content-detail img {
	max-width: 900px;
	height: auto;
}

.operate {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 0 40px;
}
</style>
